/*
  学习目标：props的两大特点
  1. props可以传递任意的数据类型
    string  number boolean  null undefined 数组 对象
    💥 函数/ JSX
  2. 单项数据流

*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello
          age={18}
          name="zs"
          isShow={true}
          un={undefined}
          nu={null}
          list={[1, 2, 3]}
          obj={{ number: 30 }}
          // 💥 函数
          fn={() => {
            alert(123);
          }}
          fn2={() => {
            return <i>123</i>;
          }}
          // 💥 JSX
          element={<button>我是传来的元素JSX</button>}
        ></Hello>
      </div>
    );
  }
}

// 👍 推荐解构props
function Hello({ name, age, isShow, un, nu, list, obj, fn, fn2, element }) {
  console.log('element  ----->  ', element);
  return (
    <div>
      Hello - {name}- {age}
      <h1>{isShow} </h1>
      <h1>{un} </h1>
      <h1>{nu} </h1>
      <h2>{list}</h2>
      <h2>{obj.number}</h2>
      <button onClick={fn}>点我一下</button>
      <h3>{fn2()}</h3>
      {element}
    </div>
  );
}
